<template>
  <div class="main flex">
    <div class="main-left" @scroll="pageScroll">
      <div class="card">
        <div class="card-title">选择产品</div>
        <div class="form">
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>选择产品：
            </div>
            <el-select v-model="form.pro" multiple collapse-tags placeholder="选择产品" style="width: 400px;">
              <el-option v-for="item in proList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <p class="to-pro font-14">没有产品，快去创建产品吧</p>
          </div>
        </div>
      </div>
      <div class="card part">
        <div class="card-title">基本信息</div>
        <div class="form">
          <p class="form-tip font-14">请保持填写内容准确性，否则会影响任务正常进行</p>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>任务中文名称：
            </div>
            <div style="flex: 1;">
              <el-input v-model="form.cName" placeholder="请输入" maxlength="20" show-word-limit
                style="width: 100%;"></el-input>
              <p class="form-desc font-12">建议以<span class="font-12">日期+产品+定向</span>命名方便后期查找,<span class="font-12">例如:
                  20210903扫地机器人ins北美</span></p>
            </div>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>任务英文名称：
            </div>
            <div style="flex: 1;">
              <el-input v-model="form.eName" placeholder="请输入" maxlength="100" show-word-limit
                style="width: 100%;"></el-input>
              <p class="form-desc font-12">建议<span class="font-12">体现产品名和投放地区平台</span>，方便红人筛选</p>
            </div>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>任务类型：
            </div>
            <el-select v-model="form.taskType" multiple collapse-tags placeholder="请选择" style="width: 410px;">
              <el-option v-for="item in taskTypeList" :key="item.value" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>任务截止时间：
            </div>
            <div>
              <el-date-picker v-model="form.taskTime" type="date" placeholder="请选择" style="width: 220px;" />
              <p class="form-desc font-12">红人将会看到该任务的<span class="font-12">截止时间</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card part">
        <div class="card-title">红人定向<span class="font-14-B">请填写实际需求，否则审核将不通过。</span></div>
        <div class="form">
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>红人分类：
            </div>
            <el-select v-model="form.cate" multiple collapse-tags placeholder="请选择" style="width: 410px;">
              <el-option v-for="item in taskTypeList" :key="item.value" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>红人国家：
            </div>
            <el-select v-model="form.country" multiple collapse-tags :multiple-limit="3" placeholder="请选择您能发货的国家，最多三个。"
              style="width: 410px;">
              <el-option v-for="item in taskTypeList" :key="item.value" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>红人平台：
            </div>
            <el-select v-model="form.platform" multiple collapse-tags placeholder="请选择" style="width: 410px;">
              <el-option v-for="item in taskTypeList" :key="item.value" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>粉丝数量级：
            </div>
            <div>
              <div class="flex flex-align-items-center">
                <el-input v-model="form.fansMin" type="number" :min="0" :step="1" placeholder="最小"
                  style="width: 190px;"></el-input>
                <p class="form-line"></p>
                <el-input v-model="form.fansMax" type="number" :min="0" :step="1" placeholder="最大"
                  style="width: 190px;"></el-input>
              </div>
              <p class="form-desc font-12">请填写正确的粉丝数区间，提高红人接单意向。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="card part">
        <div class="card-title">任务要求</div>
        <div class="form">
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>需要的红人数：
            </div>
            <div class="flex flex-align-items-center">
              <el-input v-model="form.fansMin" type="number" :min="0" :step="1" placeholder="最小"
                style="width: 190px;"></el-input>
              <p class="form-line"></p>
              <el-input v-model="form.fansMax" type="number" :min="0" :step="1" placeholder="最大"
                style="width: 190px;"></el-input>
            </div>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>预算：
            </div>
            <div style="flex: 1;">
              <el-radio-group v-model="form.budgetType" class="ml-4">
                <div class="form-radio flex flex-align-items-center">
                  <el-radio label="1">待商议</el-radio>
                </div>
                <div class="form-radio flex flex-align-items-center">
                  <el-radio label="2">初始建议价格</el-radio>
                  <div class="form-radio-value flex flex-align-items-center">
                    <span class="font-14">每条广告：</span>
                    <el-input v-model="form.price1" type="number" :min="0" :step="1" placeholder="请输入"
                      :disabled="form.budgetType != 2" style="width: 116px;"></el-input>
                    <span class="font-14">美元</span>
                  </div>
                </div>
                <div class="form-radio flex flex-align-items-center">
                  <el-radio label="3">送出免费商品当报酬</el-radio>
                  <div class="form-radio-value flex flex-align-items-center">
                    <span class="font-14">货值约：</span>
                    <el-input v-model="form.price2" type="number" :min="0" :step="1" placeholder="请输入"
                      :disabled="form.budgetType != 3" style="width: 116px;"></el-input>
                    <span class="font-14">美元</span>
                  </div>
                </div>
              </el-radio-group>
            </div>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>是否需要寄品：
            </div>
            <el-select v-model="form.sendingGoods" placeholder="请选择" style="width: 410px;">
              <el-option v-for="item in sendingGoodsList" :key="item.value" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="form-item flex">
            <div class="form-label font-14">
              <span class="font-14">*</span>说明：
            </div>
            <div style="flex: 1;">
              <el-input v-model="form.desc" type="textarea" maxlength="1000" show-word-limit
                placeholder="请使用英文，方便红人查看，例如公司基础信息，和产品的特点，以及需要红人的可交付成果（如视频的拍摄要求等）" style="width: 100%;"></el-input>
              <p class="form-desc font-12">请使用英文，方便红人查看</p>
            </div>
          </div>
        </div>
      </div>
      <div class="card form-submit flex-between flex-align-items-center">
        <p class="form-submit-desc font-14">请尽量完善信息，有利于您的任务执行进度～</p>
        <p class="form-submit-btn pointer font-12">发布任务</p>
      </div>
    </div>
    <div class="main-right card">
      <div v-for="(item, index) in stepList" :key="index" class="item pointer" :class="{ active: step === index }"
        @click="scrollTo(item.top, index)">
        <p class="item-title font-16-B">{{ item.title }}</p>
        <p class="item-desc font-14">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const stepList = [
  {
    title: '第一步：选择您的产品',
    desc: '注意：可以选择多个产品,红人将看到这些产品的信息',
    top: 0
  },
  {
    title: '第二步：填写任务基础信息',
    desc: '注意：按照规范命名,有助于您后期查找',
    top: 189
  },
  {
    title: '第三步：填写红人定向',
    desc: '注意：请填写实际条件需要的红人，有助于提高红人接单概率',
    top: 657
  },
  {
    title: '第四步：填写任务要求',
    desc: '注意：清晰明了的任务要求能够減少沟通成本 提高沟通效率【请使用英文或者当地语言填写】',
    top: 1034
  },
  {
    title: '第五步：发布任务',
    desc: '注意：发布任务后由系统智能推送到红人端或 者推送给您选定的红人',
    top: 1563
  }
];
const taskTypeList = [
  {
    name: 'youtube视频',
    value: 1
  },
  {
    name: 'instagram图文、视频',
    value: 2
  },
  {
    name: 'instagram story',
    value: 3
  },
  {
    name: 'TikTok视频',
    value: 4
  }
];
const sendingGoodsList = [
  {
    name: '品牌方邮寄商品给红人',
    value: 1
  },
  {
    name: '无需寄品',
    value: 2
  }
];

const step = ref(0);
const form = ref({});
const proList = ref([
  {
    name: 'xxx',
    id: 1
  }
]);

const pageScroll = (e) => {
  stepList.forEach((item, index) => {
    if (e.target.scrollTop >= item.top) {
      step.value = index;
    }
  });
}
const scrollTo = (e, index) => {
  document.querySelector('.main-left').scrollTo({
    top: e, //回到顶部
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
  step.value = index;
}
</script>

<style lang="less" scoped>
.main {
  .card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .04);

    .card-title {
      height: 53px;
      font-size: 20px;
      font-weight: 700;
      color: rgba(51, 51, 51, .85);
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      span {
        color: rgba(51, 51, 51, .5);
        margin-left: 8px;
      }
    }
  }

  .main-left {
    flex: 1;
    height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 16px 396px 16px 16px;

    &::-webkit-scrollbar {
      width: 0;
    }

    .card {
      padding: 24px 32px 32px;
      margin-bottom: 24px;
    }

    .form {
      .form-tip {
        color: rgba(51, 51, 51, .65);
        margin-bottom: 32px;
      }

      .form-item {
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }

        &::v-deep {

          .el-select,
          .el-input {
            height: 32px;
          }

          .el-textarea,
          textarea {
            height: 96px;
          }

          .el-radio {
            min-width: 148px;
          }
        }

        .form-label {
          color: #333;
          line-height: 32px;

          span {
            color: @main-color;
          }
        }

        .to-pro {
          line-height: 32px;
          color: #1989fa;
          text-decoration: underline;
          margin-left: 10px;
        }

        .form-desc {
          color: rgba(51, 51, 51, .65);
          margin-top: 4px;

          span {
            color: @main-color;
          }
        }

        .form-line {
          width: 14px;
          height: 2px;
          margin: 0 5px;
          background: #ccc;
          border-radius: 1px;
        }

        .form-radio {
          width: 100%;
          height: 32px;
          margin-bottom: 8px;

          .form-radio-value {
            span {
              color: #333;

              &:first-child {
                width: 70px;
                text-align: right;
              }
            }
          }
        }
      }
    }

    .form-submit {
      padding: 14px 32px;

      .form-submit-desc {
        color: rgba(51, 51, 51, .45);
      }

      .form-submit-btn {
        width: 88px;
        height: 32px;
        background: @main-color;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        line-height: 32px;
      }
    }

    .part {
      .form-label {
        width: 110px;
        text-align: right;
      }
    }
  }

  .main-right {
    position: fixed;
    right: 16px;
    top: 80px;
    width: 348px;
    height: 602px;

    &.card {
      padding: 32px 32px 0;
    }

    .item {
      margin-bottom: 24px;

      &.active {

        .item-title,
        .item-desc {
          color: @main-color;
        }
      }

      .item-title {
        color: rgba(51, 51, 51, .85);
        margin-bottom: 16px;
      }

      .item-desc {
        color: rgba(51, 51, 51, .45);
      }
    }
  }
}
</style>
